<template>
  <CustomTabs :tabsData="tabsData" :selectVal="selectVal" @onChange="selectTag">
    <CustomFilter
      :filterData="filterData"
      :sortData="sortData"
      :sortVal="sortVal"
      @changeTag="changeTag"
      @changeSort="changeSort"
    >
      <el-checkbox v-if="isLogin" class="checkbox" v-model="isChecked" @change="changeChecked">
        隐藏我学过的
      </el-checkbox>
      共{{ totalItems }}项课程
    </CustomFilter>
  </CustomTabs>
</template>

<script>
import { getToken } from '@/utils/auth'
import CustomTabs from '@/components/CustomTabs.vue';
import CustomFilter from '@/components/CustomFilter.vue';
import { mapActions } from 'vuex';
export default {
  name: 'Banner',
  components: { CustomTabs, CustomFilter },
  props: {
    totalItems: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      isChecked: false,
      tabsData: [
      ],
      // 选择大的分类
      selectVal: '1',
      // 过滤数据
      filterData: [
        {
          name: '学科',
          value: '',
          selectVal: '',
          tabList: [],
        },
        {
          name: '',
          value: '',
          selectVal: '',
          tabList: [],
        },
        {
          name: '时间',
          value: '',
          selectVal: 'ALL',
          tabList: [
            {
              name: '全部',
              value: 'ALL',
            },
            {
              name: '一周内',
              value: 'WEEK',
            },
            {
              name: '一个月内',
              value: 'MONTH',
            },
            {
              name: '半年内',
              value: 'HALF_YEAR',
            },
            {
              name: '半年以上',
              value: 'YEAR',
            },
          ],
        },
      ],
      // 筛选数据
      sortData: [
        {
          name: '综合排序',
          value: 'ALL',
        },
        {
          name: '最新',
          value: 'CREATE_TIME',
        },
        {
          name: '最热',
          value: 'JOINS',
        },
      ],
      sortVal: 'ALL',
    };
  },
  computed: {
    isLogin() {
      return !!getToken();
    }
  },
  async mounted() {
    this.getType();
  },
  methods: {
    ...mapActions(['getAllType']),
    // 获取分类
    async getType() {
      try {
        const resData = await this.getAllType({ type: 'COURSE' });
        // 设置大分类
        let useTab = resData.map((item) => {
          return {
            name: item.name,
            value: item.objectId,
            children: item.children
              ? item.children?.map((itemChildren) => {
                  return {
                    name: itemChildren.name,
                    value: itemChildren.objectId,
                    children: itemChildren.children
                      ? itemChildren.children?.map((threeChildren) => {
                          return {
                            name: threeChildren.name,
                            value: threeChildren.objectId,
                          };
                        })
                      : [],
                  };
                })
              : [],
          };
        });
        // 判断是否有二级
        if(useTab[0].children.length) {
          // 设置二级分类
          this.filterData[0].tabList = [
            ...useTab[0].children.map((itemChildren) => {
              return {
                name: itemChildren.name,
                value: itemChildren.value,
                children: itemChildren.children
              };
            }),
          ];
          this.filterData[0].selectVal = this.filterData[0].tabList[0].value;
          // 设置三级
          if(useTab[0].children[0].children.length) {
            this.filterData[1].tabList = useTab[0].children[0].children;
            this.filterData[1].selectVal = this.filterData[1].tabList[0].value;
          }
        } else {
          this.filterData[0].selectVal = '';
          this.filterData[0].tabList = [];
          this.filterData[1].selectVal = '';
          this.filterData[1].tabList = [];
        }
        this.selectVal = resData[0].objectId;
        this.tabsData = useTab;
        this.initData();
        this.$emit('changeFilter');
      } catch (error) {
        console.error(error);
      }
    },
    // 默认值初始化
    initData() {
      if(this.$route.query.id) {
        const typeId = this.$route.query.id;
        console.log(this.tabsData, typeId);
        this.tabsData.forEach(item => {
          if(typeId === item.value) {
            this.selectVal = item.value;
            this.filterData[0].selectVal = '';
            this.filterData[0].tabList = [];
            this.filterData[1].selectVal = '';
            this.filterData[1].tabList = [];
          } else {
            item.children.forEach(itemChild => {
              if(typeId === itemChild.value) {
                this.selectVal = item.value;
                this.filterData[0].selectVal = itemChild.value;
                this.filterData[0].tabList = item.children;
                this.filterData[1].selectVal = '';
                this.filterData[1].tabList = [];
              } else {
                itemChild.children.forEach(itemThree => {
                  if(typeId === itemThree.value) {
                    console.log('itemChild', itemChild, itemThree)
                    this.selectVal = item.value;
                    this.filterData[0].selectVal = itemChild.value;
                    this.filterData[0].tabList = item.children;
                    this.filterData[1].selectVal = itemThree.value;
                    this.filterData[1].tabList = itemChild.children;
                  }
                })
              }
            })
          }
        });
        console.log(
          this.selectVal,
          this.filterData
        )
      }
    },
    // 改变大的分类 全部/我的
    selectTag(tabVal, tab) {
      try {
        if (tabVal === this.selectVal) return;
        console.log(tab)
        this.selectVal = tabVal;
        this.filterData[0].tabList = tab.children;
        this.filterData[0].selectVal = tab.children.length ? tab.children[0].value : '';
        if(tab.children.length) {
          this.filterData[1].tabList = tab.children[0].children.length ? tab.children[0].children : [];
          this.filterData[1].selectVal = tab.children[0].children.length ? tab.children[0].children[0].value : '';
        } else {
          this.filterData[1].tabList = [];
          this.filterData[1].selectVal = '';
        }
        this.changeUrl();
        this.$emit('changeFilter');
      } catch (error) {
        console.log(error)
      }
    },
    // 改变tag
    changeTag(value, index, tagItem) {
      this.filterData[index].selectVal = value;
      if(index === 0) {
        if(tagItem.children && tagItem.children.length) {
          this.filterData[1].tabList = [
            ...tagItem.children,
          ];
          this.filterData[1].selectVal = tagItem.children[0].value;
        } else {
          this.filterData[1].tabList = [];
          this.filterData[1].selectVal = '';
        }
      }
      this.changeUrl();
      this.$emit('changeFilter');
    },
    // 改变路径
    changeUrl() {
      const categoryId = this.filterData[1].selectVal || this.filterData[0].selectVal || this.selectVal;
      this.$router.push(`${this.$route.path}?id=${categoryId}`)
    },
    // 改变排序
    changeSort(val) {
      this.sortVal = val;
      this.$emit('changeFilter');
    },
    // 改变是否隐藏我学过的
    changeChecked() {
      this.$emit('changeFilter');
    }
  },
};
</script>
<style lang="scss" scoped>
.checkbox {
  margin-right: 32px;
  font-weight: 400;
}
</style>
